/* eslint-disable react/prop-types */

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import WorkInfo from '../components/WorkInfo';
import ShareLinkDialog from '../components/ShareLinkDialog';
import CastViewer from '../components/CastViewer';

import * as workAction from '../WorkAction';

@connect(mapStateToProps, buildActionDispatcher)
export default class WorkDetailComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      workInfo: {},
    };
    this.onShare = this.onShare.bind(this);
    this.onShareClosed = this.onShareClosed.bind(this);
    this.onLike = this.onLike.bind(this);
    this.onUnlike = this.onUnlike.bind(this);
  }

  onShare() {
    this.setState({
      displayShareLink: true,
    });
  }

  onShareClosed() {
    this.setState({
      displayShareLink: false,
    });
  }

  onLike() {
    const { params, workAction, hasLoggedIn } = this.props;
    if (!hasLoggedIn) {
      window.alert('你还没有登录，请先登录');
      return;
    }
    workAction.likeThisWork(params.workId)
      .then(() => {
        const workInfo = this.state.workInfo;
        workInfo.likeCount = (workInfo.likeCount || 0) + 1;
        this.setState(Object.assign(this.state, {
          workInfo,
          liked: true,
        }));
      });
  }

  onUnlike() {
    const { params, workAction, hasLoggedIn } = this.props;
    if (!hasLoggedIn) {
      window.alert('你还没有登录，请先登录');
      return;
    }
    workAction.unlikeThisWork(params.workId)
      .then(() => {
        const workInfo = this.state.workInfo;
        workInfo.likeCount = (workInfo.likeCount || 1) - 1;
        this.setState(Object.assign(this.state, {
          workInfo,
          liked: false,
        }));
      });
  }

  componentDidMount() {
    const { params, workAction, isMobile } = this.props;
    workAction.getWorkDetail(params.workId).then((work) => {
      this.setState({
        workInfo: work,
      });
    });
    workAction.retrieveLikeStatus(params.workId).then((liked) => {
      this.setState({ liked });
    });
    if (isMobile) {
      document.title = 'VR中创建的全景3D大作是什么样的？';
    }
  }

  componentWillUnmount() {
    const { isMobile } = this.props;
    if (isMobile) {
      document.title = 'Hyper/Verse';
    }
  }

  render() {
    const { workInfo, liked } = this.state;
    const { likeActionStatus, isMobile, location } = this.props;
    return (
      <div id="work-detail">
        <div className="user-avatar">
          {workInfo.userImagePath &&
            <img src={workInfo.userImagePath} />
          }
          {workInfo && <span className="name">{workInfo.userName}</span>}
        </div>
        {workInfo && <CastViewer workInfo={workInfo} {...this.props} />}
        <WorkInfo
          work={workInfo}
          onShare={this.onShare}
          onLike={this.onLike}
          onUnlike={this.onUnlike}
          liked={liked}
          isMobile={isMobile}
          likeActionStatus={likeActionStatus}
          location={location}
        />
        <ShareLinkDialog link={window.location.href} display={this.state.displayShareLink} onClosed={this.onShareClosed} />
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { Root, My, Work } = state;
  const isMobile = Root.isMobile;
  const hasLoggedIn = My.Session.hasLoggedIn || false;

  const likeActionStatus = Work.likeActionStatus;
  return { isMobile, hasLoggedIn, likeActionStatus };
}

function buildActionDispatcher(dispatch) {
  return {
    workAction: bindActionCreators(workAction, dispatch),
  };
}
